<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="welcome-card">
      <h1>欢迎回来！</h1>
      <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
    </div>

    <!-- 数据概览 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6" v-for="item in overviewData" :key="item.title">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" :style="{ background: item.color }">
              <i :class="item.icon"></i>
            </div>
            <div class="overview-content">
              <div class="title">{{ item.title }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
      overviewData: [
        {
          title: '用户总数',
          value: '1,024',
          icon: 'el-icon-user',
          color: '#409EFF'
        },
        {
          title: '今日访问',
          value: '256',
          icon: 'el-icon-view',
          color: '#67C23A'
        },
        // 更多数据项...
      ]
    }
  },
  methods: {
    handleAction(action) {
      this.$router.push(action.path)
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-overview {
  margin-bottom: 20px;
}

.overview-item {
  display: flex;
  align-items: center;
}

.overview-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.overview-content .title {
  font-size: 14px;
  color: #909399;
}

.overview-content .value {
  font-size: 20px;
  font-weight: bold;
}

.quick-actions {
  margin-top: 20px;
}
</style>